
import './cart.css';

export default function Cart(props){

    const { items , increase , decrease } = props ;

    return (
        <div className="cart">
            { items.map( item => {
                return (
                    <div className="item" key={item.id}>
                        <span>{item.id}</span>
                        <span>{item.name}</span>
                        <span>{item.price}</span>
                        <span>
                            <i onClick={ () => decrease( item.id ) }>-</i>
                            <b>{item.number}</b>
                            <i onClick={ () => increase( item.id ) }>+</i>
                        </span>
                        <span>{item.price * item.number}</span>
                    </div>
                )
            })}
            <div className="total">
                { items.reduce( (prev,curr) => prev + curr.price * curr.number , 0 ) }
            </div>
        </div>
    )
}